<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable class="mt-2" :data="tableData" :total="tableTotal" v-model:page-size="pageSize" @pageSize="getList"
            v-model:currentPage="pageNum" @currentPage="getList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="title" label="资讯名称" />
            <el-table-column prop="img" label="图片">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.img" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column prop="content" label="资讯内容">
                <template #default="{ row }">
                   <div class="truncate line-clamp-2">{{ row.content }}</div>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="160px">
                <template #default="{ row }">
                    <el-button text type="primary" @click="openEdit(row)">编辑</el-button>
                    <el-button text type="danger" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </div>
    <CustomDialog v-model:show="addDialog" :title="(isEdit ? '修改' : '新增') + '资讯'" width="1200px" @cancel="cancelDialog"
        @confirm="submitForm">
        <el-form ref="formRef" :model="articleForm" label-width="auto">
            <el-form-item label="资讯名称" prop="title">
                <el-input v-model="articleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="封面图" prop="img">
                <SingleUpload v-model="articleForm.img"></SingleUpload>
            </el-form-item>
            <el-form-item label="内容" prop="content"><el-input type="textarea"
                    v-model="articleForm.content"></el-input></el-form-item>

        </el-form>
    </CustomDialog>

</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import {
    addNews,
    updateNews,
    getNewsList,
    getNews,
    delNews
} from '@/apis/article'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import _ from 'lodash'
const tableData = ref([])
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getList = async () => {
    const res = await getNewsList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    })
    tableData.value = res.list
    tableTotal.value = res.total
}

const addDialog = ref()
const openDialog = () => {
    addDialog.value = true
}
const cancelDialog = () => {
    addDialog.value = false
}
const submitForm = async () => {
    if (isEdit.value) {
        await updateNews({
            id: editTarget.value.id,
            title: articleForm.title,
            content: articleForm.content,
            img: articleForm.img
        })
        ElMessage.success("编辑成功")

    } else {
        await addNews({
            title: articleForm.title,
            content: articleForm.content,
            img: articleForm.img

        })
        ElMessage.success("添加成功")
    }

    addDialog.value = false
    getList()
}

const editTarget = ref()
const isEdit = ref(false)
const openEdit = async (row) => {
    const res = await getNewsInfo(row.id)
    isEdit.value = true
    addDialog.value = true
    const editRow = { ...res }
    Object.assign(articleForm, editRow)
    editTarget.value = row
}
const delRow = async (row) => {
    await delNews(row.id)
    ElMessage.success('删除成功')
    getList()
}
const articleForm = reactive({
    title: '',
    content: ''
})
const getNewsInfo = async (id) => {
    return await getNews(id)

}
onMounted(() => {
    getList()
})
</script>

<style scoped></style>
